<template>
	<view class="address_detail">
		<up-form labelPosition="left" :model="form" :rules="rules" ref="formRef">
			<up-form-item labelWidth="160rpx" label="姓名" borderBottom ref="item1">
				<up-input v-model="form.name" placeholder="请填写收货人姓名" border="none"></up-input>
			</up-form-item>
			<up-form-item labelWidth="160rpx" label="手机号" borderBottom ref="item1">
				<up-input v-model="form.mobile" placeholder="请填写手机号" border="none"></up-input>
			</up-form-item>
			<up-form-item labelWidth="160rpx" label="所在地址" borderBottom @click="onChoose()" ref="item1">
				<up-input v-model="addressVal" disabled disabledColor="#ffffff" placeholder="请选择地址"
					border="none"></up-input>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<up-form-item labelWidth="160rpx" label="详细地址" borderBottom>
				<up-textarea v-model="form.address" placeholder="如: 霞飞路15号8-1"></up-textarea>
			</up-form-item>

		</up-form>
		<view class="fixbtn" style="flex-direction: column">
			<up-button :loading="loading" type="success" shape="circle" text="保存地址" @click="submit()"></up-button>
		</view>
	</view>
</template>



<script>
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
		onBeforeMount,
	} from "vue"
	import {
		useStore
	} from '@/store/index.js'
	import {
		addAddressApi
	} from '@/api/user.js'
	import {
		goBack
	} from '@/utils/utils.js'
	
	import GDMapWX from '@/utils/amap-wx.130.js'

	export default {
		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				loading: false,
				amap: null,
				addressVal:'',
				form: {
					address: "",
					areaId: "30001",
					areaName: "",
					id: null,
					isDefault: 0,
					mobile: "",
					name: "",
					provinceId: "30001",
					provinceName: "",
					urbanId: "30001",
					urbanName: ""
				},
			})
			onBeforeMount(() => {
				state.amap = new GDMapWX.AMapWX({
					key: 'feb39f9446bf9c7be0b9c1d53d1ce476'
				})
			})
			onLoad(() => {
				getData()


			})

			const getData = async (res) => {
				
			}
		
			const onChoose = () => {
				uni.hideKeyboard()
				uni.chooseLocation({
					type: "gcj02",
					success: (res) => {
						console.log(res)
						state.amap.getRegeo({
							location: `${res.longitude},${res.latitude}`,
							success(res) {
								let data = res[0].regeocodeData.addressComponent
								state.form.address = data.desc
								state.form.areaName= data.district // 区
								state.form.provinceName= data.province //省
								state.form.urbanName= data.city.length > 0 ? res.city : '' // 市
								state.addressVal=`${data.province} ${data.city} ${data.district} `
							},
							fail(err) {
								reject(err)
								uni.$u.toast("地址解析错误，请重试！")
							}
						})
					},

				});
			}
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			const submit = async () => {
				if (!state.form.name) {
					uni.$u.toast("请填写收货人姓名");
					return false;
				}
				state.form.mobile = state.form.mobile.replace(/\s/g, "");
				if (!uni.$u.test.mobile(state.form.mobile)) {
					uni.$u.toast("手机号格式有误");
					return false;
				}
				if (!state.form.provinceName || !state.form.areaName) {
					uni.$u.toast("请选择所在地址");
					return false;
				}
				if (!state.form.address) {
					uni.$u.toast("请填写详细收货地址");
					return false;
				}
				state.loading = true
				try {
					await addAddressApi(state.form)
					goBack()

				} catch {
					state.loading = false
				}


			}


			return {
				...toRefs(state),
				onChoose,
				submit,
			}
		}

	}
</script>

<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss">
	.address_detail {
		height: 100vh;
		padding: 20rpx;
		background-color: #fff;
	}

	.fixbtn {
		position: fixed;
		z-index: 10;
		padding: 10rpx 20rpx 0 20rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));

		.p10 {
			margin-left: 10rpx;
		}

		.pr10 {
			margin-right: 10rpx;
		}

	}
</style>